<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增厂商信息')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-firm-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">公司名称：</label>
            <div class="col-sm-8">
                <input name="firmName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">负责人姓名：</label>
            <div class="col-sm-8">
                <input name="firmChargeUser" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">联系电话：</label>
            <div class="col-sm-8">
                <input name="firmTel" class="form-control" type="text">
            </div>
        </div>
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">爱好：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="studentHobby" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">性别：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <select name="studentSex" class="form-control m-b">-->
<!--                    <option value="">所有</option>-->
<!--                </select>-->
<!--                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">状态：</label>
            <div class="col-sm-8">
                <div class="radio-box">
                    <input type="radio" name="status" value="1">
                    <label th:for="status" th:text="可用"></label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="status" value="0">
                    <label th:for="status" th:text="不可用"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">创建时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="creatTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">创建人id：</label>
            <div class="col-sm-8">
                <input name="sysCreateUserId" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">所属区域：</label>
            <select name="province" id="province">
                <option  value="">请选择省份</option>
            </select>
            <select name="sysCityId" id="sysCityId">
                <option value="">请选择城市</option>
            </select>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">厂商描述：</label>
            <div class="col-sm-8">
                <input name="firmDesc" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">联系地址：</label>
            <div class="col-sm-8">
                <input name="address" class="form-control" type="text">
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "purchase/firm"
    $("#form-firm-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-firm-add').serialize());
        }
    }

    $("input[name='creatTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(document).ready(function() {   //页面加载时运行此函数  放在最前端
        $.get("/purchase/firm/province/select",{},function(data){
            <!--清空下拉框中的缓存-->
            $("#province").empty();
            <!--避免下拉框的值不变-->
            $("#province").append("<option value=''>请选择省份</option>");
            <!--使用循环解析后端传来的数据，并用使用js动态拼接html语言-->
            for (var i = 0; i < data.length; i++) {
                $("#province").append("<option value='" + data[i].provId + "'>" + data[i].provName + "</option>");
            }
        })
    })
    $("#province").change(function() {//同上面一样
        $.ajax({
            url:"/purchase/firm/city/select",
            type:'GET',
            data:{
                cid:$("#province").val(),
            },
            success:function(data) {
                // alert(JSON.stringify(data))
                $("#sysCityId").empty();
                $("#sysCityId").append("<option value=''>请选择城市：</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#sysCityId").append("<option value='" + data[i].cityId + "'>" + data[i].cityName + "</option>");
                }
            }
        })
    });
</script>
</body>
</html>